<template>
  <div>
    <a-select 
      v-model:value="value" 
      class="use-property" 
      size="small" 
      placeholder="请选择页面组件"
      show-search
      @change="handleChange"
      >
      <a-select-option
        v-for="item in options"
        :key="item.value"
        size="small"
        :title="item.name"
        :value="item.value">
        <span 
          style="display: block"
          @mouseenter.stop="handleMouseEnter(item.modelId)"
        >
          <b>{{ item.name }}</b> 
        </span>
      </a-select-option>
    </a-select>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, Ref, ref, unref, defineProps, watch, defineExpose, defineEmits , computed} from 'vue';

const value: Ref = ref('');

// 定义组件接收的参数
const props = defineProps({
  context: Object,
  defaultValue: Object
});

const emits = defineEmits(['change']);


watch(
  () => props.defaultValue,
  (val) => {
    value.value = val;
  },
  { deep: true, immediate: true }
);

const options : Array = computed(() => {
  const options = [];
  return options;
});


// 鼠标悬浮时高亮画布对应组件
const handleMouseEnter = (e) => { 

};

// 选择组件后获取组件值
const handleChange = (e) => { 
  const option = options.find(item => item.value === e)
  emits('change', {
    ...option
  })
};
</script>

<style scoped lang="less">
:deep(.a-select) {
  width: 100%;
}
</style>